import React, { Component } from 'react'
// import item from './index.css'
export default class Item extends Component {
	state = {mouse: false}
	// 鼠标进出事件
	handleMouse = (flag) => {
		return () => {
			this.setState({mouse: flag})
		}
	}
	// 选择或者取消某个勾选
	checkBoxChange = (id) => {
		return (e) => {
			console.log('checkBoxChange', id, e.target.checked)
			this.props.changeToduList(e.target.checked, id)
		}
	}
	// 删除事件
	deleteTodo = (id) => {
		if (window.confirm('您确定要删除吗？')) {
			this.props.deleteTodo(id)
		}
		// const {todos} = this.state
		// // 删除一个对象数组中的某条数据适合用filter
		// const newTodos = todos.filter((item) => {
		// 	return item.id !== id
		// })
		// this.setState({todos:newTodos})
	}
	
	render() {
		const {id,name,done} =  this.props
		return (
			<div style={{backgroundColor: this.state.mouse ? '#ddd' : 'white'}} className="flex flex-row justify-between align-center itemStyle" onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
				<label className="checkbox flex-1">
					<input type="checkbox" checked={done} onChange={this.checkBoxChange(id)}/>
					<span>{name}</span>
				</label>
				<button onClick={() => this.deleteTodo(id)} className="btnStyle" style={{display:this.state.mouse ? 'block' : 'none'}}>删除</button>
			</div>
		)
	}
}